<html>
<head>
<script type="text/javascript" src="protovis-d3.2.js"></script>
<style type="text/css">
  td.left { vertical-align: bottom }
  td.right { padding-left: 20px; vertical-align: bottom  }
  div.plot { width:200; height:100 }
</style>
<script type="text/javascript" src="histogram.js"></script>
<script type="text/javascript">

var data = [0, 1, 1, 2, 3, 3, 3, 3, 5];
document.write('<big>data: ' + data + '</big><br><br>');

var histop = pv.histogram(data);

function description (bins, title) {
    var desc = title + '<br>';
    desc += 'bin size: ' + bins[0].dx + '<br>';
    desc += 'lower edges: ' + bins.map(function(v) v.x) + '<br>';
    desc += bins.length + ' bins: ' + bins.join('|') + '<br>';
    return desc;
}

function plot(bins, vis) {
    var x = pv.Scale.linear()
        .domain(pv.min(bins, function(b) b.x), pv.max(bins, function(b) b.x) + bins[0].dx)
        .range(0,200);
    var y = pv.Scale.linear()
        .domain(0, pv.max(bins, function(b) b.y))
        .range(0,100);
    vis.width(200).height(100)
        .strokeStyle('gray');
    vis.add(pv.Bar)
        .data(bins)
        .bottom(0)
        .left(function(b) x(b.x))
        .height(function(b) y(b.y))
        .width(function(b) x(b.dx))
        .root.render();
}

function addRow(bins, title, commentText) {
    if (commentText === undefined) commentText = '';
    var row = document.createElement('tr');
    var left = document.createElement('td');
    left.class = 'left';
    var right = document.createElement('td');
    right.class = 'right';
    var comment = document.createElement('td');
    var plot = document.createElement('div');
    plot.class = 'plot';
    left.innerHTML = description(bins, title);
    right.appendChild(plot);
    comment.innerHTML = commentText;
    row.appendChild(left);
    row.appendChild(right);
    row.appendChild(comment);
    document.getElementById('table').appendChild(row);
    return plot;
}

</script>
</head>

<body>
<table id="table">
</table>

<script type="text/javascript">

var bins = histop.bins();
var plotDiv = addRow(bins, 'default binning', "Spacing is odd. Bins are inclusive on lower and upper bound, so 1's fall into second bin instead of third.");
var vis = new pv.Panel().canvas(plotDiv);
plot(bins, vis);

var breaks = [0,1,2,3,4,5];
bins = histop.bins(breaks);
plotDiv = addRow(bins, 'specified breaks ' + breaks, "First bin picks up 0's and 1's, though 2's and 3's are separated in following bins.");
vis = new pv.Panel().canvas(plotDiv);
plot(bins, vis);

breaks = pv.range(-0.5, 5.5, 1);
bins = histop.bins(breaks);
plotDiv = addRow(bins, 'specified breaks ' + breaks, "Bin position/widths messed up because I didn't try to account for the 0.5 offset.");
vis = new pv.Panel().canvas(plotDiv);
plot(bins, vis);

</script>
</body>
</html>
